<template>
    <div class="screen-right">
        <div class="screen-right-item production-item" data-label="产">
            <div class="item-content-wrapper">
                <div class="title-wrapper">
                    <div class="title">2025年GDP产值（万元）</div>
                </div>
                <div class="production-content">
                    <div class="left-panel">
                        <div class="gdp-value">31,078,648</div>
                        <div id="gdpChart" class="chart-container"></div>
                    </div>
                    <div class="right-panel" style="justify-content: space-around;">
                        <div class="export-item">
                            <div class="export-label">货贸出口</div>
                            <div class="export-value">358,715</div>
                        </div>
                        <div class="export-item">
                            <div class="export-label">服贸出口</div>
                            <div class="export-value">118,715</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-right-item" data-label="消">
            <div class="item-content-wrapper">
                <div class="left-panel">
                    <div class="title-wrapper">
                        <div class="title">年度社零消费(万元)</div>
                    </div>
                    <div class="gdp-value">
                        <span class="number-item" v-for="(item, index) in '19456.69'.split('')" :key="index">{{ item
                        }}</span>
                    </div>
                    <div id="consumptionChart" class="chart-container"></div>
                </div>
                <div class="right-panel">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #83bff6;"></div>
                        <div class="legend-label">批发零售</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #ffc107;"></div>
                        <div class="legend-label">住宿餐饮</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #28a745;"></div>
                        <div class="legend-label">其他服务</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-left-item">
            <div class="item-label">地</div>
            <!-- <div class="more-button">...</div> -->
            <div class="item-content">
                <div class="title">土地出让估值（万元）</div>
                <div class="value">
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">0</span>
                    <span class="digit">3</span>
                    <span class="digit">6</span>
                    <span class="digit">4</span>
                    <span class="digit">1</span>
                    <span class="digit">1</span>
                </div>
                <div class="details">
                    <div class="detail-item">
                        <div class="detail-label">收储面积（亩）</div>
                        <div class="detail-value">512.11</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">供应土地（宗）</div>
                        <div class="detail-value">369</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">出让面积（亩）</div>
                        <div class="detail-value">745.92</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-right-item" data-label="投">
            <div class="item-content-wrapper">
                <div class="title-wrapper">
                    <div class="title">年度固投完成率</div>
                </div>
                <div class="investment-content">
                    <div class="left-panel">
                        <div id="investmentChart" class="chart-container"></div>
                    </div>
                    <div class="right-panel">
                        <div class="investment-item">
                            <div class="investment-label">固投总额（万元）</div>
                            <div class="investment-value">89,452</div>
                        </div>
                        <div class="investment-item">
                            <div class="investment-label">政府投资（万元）</div>
                            <div class="investment-value">34,110</div>
                        </div>
                        <div class="investment-item">
                            <div class="investment-label">社会投资（万元）</div>
                            <div class="investment-value">55,342</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-right-item" data-label="游">
            <div class="item-content-wrapper">
                <div>
                    <div class="title-wrapper">
                        <div class="title">年度游客接待人次</div>
                    </div>
                    <div class="value">
                        <span class="number-item" v-for="(item, index) in '10078648'.split('')" :key="index">{{ item
                        }}</span>
                    </div>
                    <div style="display: flex;">
                        <div class="tourism-income">
                            <div class="income-title">2025年旅游收入(万元)</div>
                            <div class="income-details">
                                <div class="income-value">4,510,001.21</div>
                                <div class="income-progress"></div>
                            </div>
                        </div>
                        <div class="gender-stats">
                            <div class="gender-item">
                                <img src="@/assets/icon/man.png" alt="男" />
                                <span class="icon-male">男 43.11%</span>
                            </div>
                            <div class="gender-item" style="margin-left: 0.3vw;">
                                <img src="@/assets/icon/women.png" alt="女" />
                                <span class="icon-female">女 44.2%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

let gdpChartInstance;
let consumptionChartInstance;
let investmentChartInstance;

onMounted(() => {
    initGdpChart();
    initConsumptionChart();
    initInvestmentChart();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    gdpChartInstance?.dispose();
    consumptionChartInstance?.dispose();
    investmentChartInstance?.dispose();
});

const handleResize = () => {
    gdpChartInstance?.resize();
    consumptionChartInstance?.resize();
    investmentChartInstance?.resize();
};

const initConsumptionChart = () => {
    const chartDom = document.getElementById('consumptionChart');
    if (chartDom) {
        consumptionChartInstance = echarts.init(chartDom);
        const option = {
            grid: {
                left: '0%',
                right: '0%',
                top: '80%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['09月', '10月', '11月', '12月', '01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: '#a2d2ff',
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: '#a2d2ff',
                    fontSize: 8
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            series: [
                {
                    name: '批发零售',
                    type: 'bar',
                    stack: 'total',
                    barWidth: '40%',
                    data: [34.3, 12.5, 32.5, 34.3, 12.5, 32.5, 34.3, 12.5, 32.5, 34.3, 12.5, 32.5],
                    itemStyle: {
                        color: '#83bff6'
                    }
                },
                {
                    name: '住宿餐饮',
                    type: 'bar',
                    stack: 'total',
                    data: [21.4, 24.4, 21.8, 21.4, 24.4, 21.8, 21.4, 24.4, 21.8, 21.4, 24.4, 21.8],
                    itemStyle: {
                        color: '#ffc107'
                    }
                },
                {
                    name: '其他服务',
                    type: 'bar',
                    stack: 'total',
                    data: [21.11, 54.13, 39.32, 21.11, 54.13, 39.32, 21.11, 54.13, 39.32, 21.11, 54.13, 39.32],
                    itemStyle: {
                        color: '#28a745'
                    }
                }
            ]
        };
        consumptionChartInstance.setOption(option);
    }
};


const initGdpChart = () => {
    const chartDom = document.getElementById('gdpChart');
    if (chartDom) {
        gdpChartInstance = echarts.init(chartDom);
        const option = {
            grid: {
                left: '0%',
                right: '1%',
                top: '60%',
                containLabel: false
            },
            xAxis: {
                type: 'category',
                data: ['2024年Q3', '2024年Q4', '2025年Q1', '2025年Q2'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: '#a2d2ff',
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: '#a2d2ff',
                    fontSize: 6
                },

            },
            tooltip: {
                trigger: 'axis'
            },
            series: [
                {
                    name: 'GDP增速',
                    type: 'line',
                    smooth: true,
                    data: [52.1, 6.9, 4.9, 8.1],
                    itemStyle: {
                        color: '#ffdd57'
                    },
                    label: {
                        show: true,
                        formatter: '{c}%',
                        color: '#fff',
                        position: 'top'
                    }
                },
                {
                    name: '第一产业',
                    type: 'bar',
                    barWidth: '15%',
                    data: [34.3, 24.4, 32.5, 41.5],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 1, color: '#188df0' }
                        ])
                    }
                },
                {
                    name: '第二产业',
                    type: 'bar',
                    barWidth: '15%',
                    data: [21.4, 12.5, 21.8, 12.8],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffc107' },
                            { offset: 1, color: '#e0a800' }
                        ])
                    }
                },
                {
                    name: '第三产业',
                    type: 'bar',
                    barWidth: '15%',
                    data: [21.11, 54.13, 39.32, 51.15],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#28a745' },
                            { offset: 1, color: '#218838' }
                        ])
                    }
                }
            ]
        };
        gdpChartInstance.setOption(option);
    }
};

const initInvestmentChart = () => {
    const chartDom = document.getElementById('investmentChart');
    if (chartDom) {
        investmentChartInstance = echarts.init(chartDom);
        const option = {
            series: [
                {
                    type: 'pie',
                    radius: ['70%', '85%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        formatter: '{d}%',
                        fontSize: 16,
                        fontWeight: 'bold',
                        color: '#fff'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 75, name: '执行率', itemStyle: { color: '#19e476' } },
                        { value: 25, name: '未执行', itemStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
                    ]
                }
            ]
        };
        investmentChartInstance.setOption(option);
    }
};
</script>
<style scoped lang="scss">
/* 右侧可视化组件样式 */
.screen-right {
    position: absolute;
    right: 1.04vw; // 20px
    top: 9.26vh; // 100px
    width: 18.67vw; // 360px
    height: calc(100vh - 12.96vh); // 140px
    z-index: 100;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .screen-right-item {
        width: 100%;
        height: 18.5%;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(0.52vw); // 10px
        -webkit-backdrop-filter: blur(0.52vw); // 10px
        border: 0.05vw solid rgba(0, 174, 255, 0.3); // 1px
        border-radius: 0.42vw; // 8px
        box-shadow: 0 0.21vw 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
        position: relative;

        &::before {
            content: attr(data-label);
            position: absolute;
            top: 0;
            right: 0;
            width: 1.56vw; // 30px
            height: 2.78vh; // 30px
            background: linear-gradient(135deg, #6fb3ee 0%, #0378ff 100%);
            border: 0.05vw solid rgba(0, 174, 255, 0.5); // 1px
            border-radius: 0.21vw; // 4px
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: calc(12px + 0.2vw);
            font-weight: bold;
            text-shadow: 0 0 0.26vw rgba(0, 174, 255, 0.5); // 5px
        }

        .item-content-wrapper {
            display: flex;
            height: 100%;
            padding: 0.93vh; // 10px

            .title-wrapper {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title {
                    font-size: calc(14px + 0.21vw);
                    font-weight: bold;
                    color: #a2d2ff;
                }

                .more-link {
                    color: #a2d2ff;
                    font-size: calc(10px + 0.1vw);
                    cursor: pointer;
                }
            }

            .left-panel {
                width: 80%;
                display: flex;
                flex-direction: column;

                .gdp-value {
                    font-size: calc(16px + 0.31vw);
                    font-weight: bold;
                    color: #fff;
                    text-shadow: 0 0 0.42vw rgba(0, 174, 255, 0.8); // 8px
                    letter-spacing: 0.1vw; // 2px
                    display: flex;
                    justify-content: flex-start;

                    .number-item {
                        display: inline-block;
                        padding: 0.1vh 0.26vw; // 2px 5px
                        margin: 0 0.1vw; // 0 2px
                        background: rgba(255, 255, 255, 0.1);
                        backdrop-filter: blur(0.26vw);
                        -webkit-backdrop-filter: blur(0.26vw);
                        border: 0.05vw solid rgba(255, 255, 255, 0.2);
                        border-radius: 0.21vw; // 4px
                        box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
                        color: #fff;
                        text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
                    }
                }

                .chart-container {
                    // height: 100%;
                    // width: 100%;
                    flex-grow: 1;
                    margin-top: 0.93vh; // 10px
                }
            }

            .right-panel {
                width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: end;
                padding-left: 1.04vw; // 20px

                .export-item {
                    // margin-bottom: 1.85vh; // 20px

                    .export-label {
                        color: #a2d2ff;
                        font-size: calc(10px + 0.1vw);
                    }

                    .export-value {
                        color: #fff;
                        font-size: calc(10px + 0.21vw);
                        font-weight: bold;
                        text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
                    }
                }

                .legend-item {
                    display: flex;
                    align-items: center;
                    // margin-bottom: 10px;

                    .legend-color {
                        width: 0.625vw;
                        height: 1.11vh;
                        border-radius: 0.1vw;
                        margin-right: 0.42vw;
                    }

                    .legend-label {
                        color: #a2d2ff;
                        font-size: calc(10px + 0.1vw);
                    }
                }

                .legend-item:last-child {
                    margin-bottom: 1vh;
                }
            }
        }
    }

    .screen-left-item {
        width: 100%;
        height: 18.5%;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 174, 255, 0.3);
        border-radius: 0.42vw; // 8px
        box-shadow: 0 0.21vw 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
        position: relative;

        .item-label {
            position: absolute;
            top: 0;
            right: 0;
            width: 1.56vw; // 30px
            height: 2.78vh; // 30px
            background: linear-gradient(135deg, #6fb3ee 0%, #0378ff 100%);
            border: 1px solid rgba(0, 174, 255, 0.5);
            border-radius: 0.21vw; // 4px
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: calc(12px + 0.2vw);
            font-weight: bold;
            text-shadow: 0 0 0.26vw rgba(0, 174, 255, 0.5); // 5px
        }

        .item-content {
            position: absolute;
            top: 0.93vh; // 10px
            left: 0.93vw; // 40px
            right: 0.52vw; // 10px
            bottom: 0.93vh; // 10px
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #fff;
        }

        .title {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #a2d2ff;
        }

        .value {
            font-size: calc(16px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.52vw rgba(0, 174, 255, 0.5); // 10px
            display: flex;
            margin-bottom: 0.1vh; // 2px
        }

        .digit {
            display: inline-block;
            padding: 0.1vh 0.26vw; // 2px 5px
            margin: 0 0.1vw; // 0 2px
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 0.21vw; // 4px
            box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
            color: #fff;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100%;
            align-items: center;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .detail-item:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 15%;
            bottom: 15%;
            width: 0.05vw; // 1px
            background: rgba(0, 174, 255, 0.3);
        }

        .detail-label {
            font-size: calc(10px + 0.1vw);
            color: #a2d2ff;
        }

        .detail-value {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .execution-rate-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            min-height: 0;
        }

        .chart-container {
            width: 50%;
            height: 100%;
        }

        .issue-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 50%;
        }

        .issue-item {
            font-size: calc(12px + 0.1vw);
            color: #a2d2ff;
            margin-bottom: 0.46vh; // 5px
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 174, 255, 0.2);
            padding-bottom: 0.46vh; // 5px
        }

        .issue-value {
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }

        .more-button {
            position: absolute;
            top: -0.46vh; // -5px
            right: 0.52vw; // 10px
            color: #fff;
            cursor: pointer;
            font-size: 1.04vw; // 20px
            font-weight: bold;
        }
    }

    .production-item {
        .item-content-wrapper {
            flex-direction: column;
        }

        .production-content {
            display: flex;
            flex-grow: 1;
        }

        .left-panel {
            width: 80%;
        }

        .right-panel {
            width: 20%;
            justify-content: space-around;
        }

        .export-label {
            font-size: calc(8px + 0.1vw);
        }
    }

    .screen-right-item[data-label="地"] {
        .item-content-wrapper {
            flex-direction: column;
            justify-content: space-between;
            padding-left: 0.52vw;
            padding-right: 0.52vw;
        }

        .item-content {
            display: flex;
            flex-direction: column;
            color: #fff;
        }

        .title {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #a2d2ff;
        }

        .value {
            font-size: calc(16px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.52vw rgba(0, 174, 255, 0.5);
            display: flex;
            margin-bottom: 0.1vh;
            margin-top: 0.5vh;

            .number-item {
                display: inline-block;
                padding: 0.1vh 0.26vw;
                margin: 0 0.1vw;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(0.26vw);
                -webkit-backdrop-filter: blur(0.26vw);
                border: 0.05vw solid rgba(255, 255, 255, 0.2);
                border-radius: 0.21vw;
                box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1);
                color: #fff;
                text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8);
            }
        }

        .land-details {
            display: flex;
            justify-content: space-around;
            width: 100%;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            justify-content: center;
        }

        .detail-item:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 15%;
            bottom: 15%;
            width: 0.05vw;
            background: rgba(0, 174, 255, 0.3);
        }

        .detail-label {
            font-size: calc(10px + 0.1vw);
            color: #a2d2ff;
        }

        .detail-value {
            font-size: calc(14px + 0.21vw);
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8);
        }
    }

    .screen-right-item[data-label="投"] {
        .item-content-wrapper {
            flex-direction: column;
        }

        .investment-content {
            display: flex;
            flex-grow: 1;
            margin-top: -1.8vh;
        }

        .left-panel {
            width: 50%;
            align-items: center;
            justify-content: center;
        }

        .chart-container {
            flex-grow: 0;
            width: 80%;
            height: 80%;
            // margin-top: 0;
            // top: -20px;
        }

        .right-panel {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding-left: 1.04vw; // 20px
        }

        .investment-item {
            display: flex;
            justify-content: space-between;
        }

        .investment-label {
            color: #a2d2ff;
            font-size: calc(10px + 0.1vw);
        }

        .investment-value {
            color: #fff;
            font-size: calc(10px + 0.21vw);
            font-weight: bold;
            text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
        }
    }

    .screen-right-item[data-label="游"] {
        .item-content-wrapper {
            display: flex;
            // flex-direction: column;
            // justify-content: space-around;
        }

        .value {
            margin-top: 0.5vh;
            margin-bottom: 1vh;
            display: flex;
            font-size: calc(16px + 0.21vw);
            font-weight: bold;
            color: #fff;

            .number-item {
                display: inline-block;
                padding: 0.1vh 0.26vw; // 2px 5px
                margin: 0 0.1vw; // 0 2px
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(0.26vw);
                -webkit-backdrop-filter: blur(0.26vw);
                border: 0.05vw solid rgba(255, 255, 255, 0.2);
                border-radius: 0.21vw; // 4px
                box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
                color: #fff;
                text-shadow: 0 0 0.5vw #fff, 0 0 1.5vw rgba(0, 174, 255, 0.8);
            }
        }

        .tourism-income {
            .income-title {
                font-size: calc(10px + 0.1vw);
                color: #a2d2ff;
            }

            .income-details {
                display: flex;
                flex-direction: column;

                .income-value {
                    font-size: calc(16px + 0.2vw);
                    font-weight: bold;
                    color: #fff;
                    margin-right: 0.52vw;
                }

                .income-progress {
                    width: 5.2vw;
                    height: 0.74vh;
                    background: rgba(255, 255, 255, 0.2);
                    border-radius: 0.21vw;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 60%;
                        /* Example progress */
                        height: 100%;
                        background: #03a9f4;
                        border-radius: 0.21vw;
                    }
                }
            }
        }

        .gender-stats {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 1.2vw;
            margin-top: -0.8vh;

            .gender-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #fff;
                font-size: calc(12px + 0.1vw);

                img {
                    width: 2.5vw;
                    height: auto;
                    // margin-bottom: 0.5vh;
                }

                .iconfont {
                    font-size: calc(10px + 0.5vw);
                    // margin-right: 0.26vw;
                }

                .icon-male {
                    color: #03a9f4;
                }

                .icon-female {
                    color: #e91e63;
                }
            }
        }
    }
}
</style>